<template>
  <div class="container">
    <div class="nav">
      <el-radio-group v-model="req.delvStatus" size="small" @input="getList">
        <el-badge v-if="statsData.sumDelvStatus1" :value="statsData.sumDelvStatus1" :max="99">
          <el-radio-button label="1">接单</el-radio-button>
        </el-badge>
        <el-badge v-else :hidden="true">
          <el-radio-button label="1">接单</el-radio-button>
        </el-badge>
        <el-badge v-if="statsData.sumDelvStatus2" :value="statsData.sumDelvStatus2" :max="99">
          <el-radio-button label="2">取件</el-radio-button>
        </el-badge>
        <el-badge v-else :hidden="true" :value="statsData.sumDelvStatus2" :max="99">
          <el-radio-button label="2">取件</el-radio-button>
        </el-badge>
        <el-badge v-if="statsData.sumDelvStatus3" :value="statsData.sumDelvStatus3" :max="99">
          <el-radio-button label="3">配送</el-radio-button>
        </el-badge>
        <el-badge v-else :hidden="true" :value="statsData.sumDelvStatus4" :max="99">
          <el-radio-button label="3">配送</el-radio-button>
        </el-badge>
        <el-badge v-if="statsData.sumDelvStatus4" :value="statsData.sumDelvStatus4" :max="99999">
          <el-radio-button label="4">完成</el-radio-button>
        </el-badge>
        <el-badge v-else :hidden="true" :max="99">
          <el-radio-button label="4">完成</el-radio-button>
        </el-badge>
      </el-radio-group>
    </div>
    <div
      v-for="(order, index) in orderList"
      :key="index"
      class="list"
      @click="drawerOpen(order)"
    >
      <div class="title">
        <div v-if="order.itemList[0].productName" class="left">
          {{ order.itemList[0].productName }} - {{ order.totalNum }}件
        </div>
        <div v-if="order.tag ==0" class="left">
          {{ dictFormat("app_order_tag", order.tag) }}
        </div>
        <div v-else-if="order.tag ==1" class="left2">
          {{ dictFormat("app_order_tag", order.tag) }}
        </div>
        <!-- <div class="play"><sapn class="ply1">￥- </sapn>/<sapn class="ply2">￥8.00</sapn></div> -->
        <div class="right">
          <span v-if="order.delvStatus ==1" class="t1">{{
            dictFormat("app_order_delv_status", order.delvStatus)
          }}</span>
          <span v-else-if="order.delvStatus ==2" class="t2">{{
            dictFormat("app_order_delv_status", order.delvStatus)
          }}</span>
          <span v-else-if="order.delvStatus ==3" class="t3">{{
            dictFormat("app_order_delv_status", order.delvStatus)
          }}</span>
          <span v-else-if="order.delvStatus ==4" class="t4">{{
            dictFormat("app_order_delv_status", order.delvStatus)
          }}</span>
        </div>
      </div>
      <div class="add">
        {{ order.comy }} - <span
          style="color: #ff6600"
        > {{ order.ridgepole }}{{ order.unit }} </span> - {{ order.door }}
      </div>
      <div class="station">
        <div v-for="(tag, tagIdx) in order.tagList" :key="tagIdx" class="piece">
          <span>{{ tag.name }}</span>
          <span v-if="tag.val && tag.urlList && (tag.val+tag.urlList.length) > 0">{{
            tag.val+tag.urlList.length
          }}</span>
          <span v-else-if="tag.urlList && tag.urlList.length > 0">{{
            tag.urlList.length
          }}</span>
          <span v-else-if="tag.val && tag.val > 0">{{
            tag.val
          }}</span>
          <span v-else>-</span>
        </div>
      </div>
      <div class="play">
        <div class="play-num">  金额：￥{{ order.realPayAmount }}</div>
        <div class="play-cla">{{ dictFormat("app_order_delv_mode",order.delvMode) }} {{ order.intoPwd }} {{ order.aptTime }}</div>
      </div>
      <div class="footer">
        <div class="time">{{ order.createTime }}</div>
        <div v-if="order.costTime" class="time">耗时{{ order.costTime }}</div>
      </div>
    </div>

    <el-pagination
      :current-page="req.pageNum"
      :page-sizes="[10, 30, 50, 100]"
      :page-size="req.pageSize"
      layout="sizes, prev, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 订单详情页面弹窗 -->

    <el-drawer
      title="订单详情"
      :with-header="false"
      :visible.sync="drawer.visible"
      direction="rtl"
      size="100%"
    >
      <div class="content">
        <div class="app-top">
          <div class="app-title">订单详情</div>
          <div class="close" @click="drawerClose()">
            <i class="el-icon-close" />
          </div>
        </div>

        <div class="card">
          <div class="list-s">
            订单编号：<span>{{
              drawer.order.tradeNo ? drawer.order.tradeNo : "-"
            }}</span>
          </div>
          <div class="list-s">
            取件数量：<span>{{
              drawer.order.totalNum ? drawer.order.totalNum : "-"
            }}</span>
          </div>
          <div class="list-s">
            配送方式：
            <span>{{ dictFormat("app_order_delv_mode",drawer.order.delvMode) }} {{ drawer.order.intoPwd }} {{ drawer.order.aptTime }}</span>
          </div>
          <div class="list-s">
            联系方式：<span>{{ drawer.order.addrNick }}：
              <a v-if="drawer.order.delvStatus && (drawer.order.delvStatus ==1 | drawer.order.delvStatus ==2 | drawer.order.delvStatus ==3)" :href="'tel:'+drawer.order.addrPhone"> 拨电话:   {{ formattedPhoneNumber(drawer.order.addrPhone) }}</a>

            </span>
          </div>
          <div class="list-s">
            配送地址：<span>{{
              drawer.order.addrDetail
                ? drawer.order.addrDetail
                : "-"
            }}</span>
          </div>
          <div class="list-s">
            订单时间：<span>{{
              drawer.order.createTime
            }}</span>
          </div>
          <div class="imgs">
            <div
              v-for="(img, index) in drawer.order.attachFileList"
              :key="index"
              class="v-img"
              @click="previewImage(img)"
            >
              <span class="img-info">
                {{ tagName(img) }}
              </span>
              <el-image :src="img" fit="contain" />
            </div>
          </div>
          <div class="info">{{ drawer.order.attachText }}</div>

          <!-- 截图预览打标签 -->
          <el-drawer
            title="图片预览"
            :with-header="false"
            :append-to-body="true"
            :show-close="true"
            :transfer="false"
            :visible.sync="drawerPreImg.visible"
            direction="rtl"
            :before-close="closePreview"
            size="80%"
            custom-class="preview"
          >
            <div class="app-img-top">
              <div class="app-img-title">驿站标记</div>
              <div class="close" @click="closePreview()">
                <i class="el-icon-close" />
              </div>
            </div>

            <el-image class="preview-img" :src="drawerPreImg.preImg" fit="contain" />
            <div class="preview-info">
              <div
                v-for="(tag, index) in drawer.delvTagList"
                :key="index"
                @click="tagClicked(tag)"
              >
                <span
                  v-if="
                    tag.urlList && tag.urlList.indexOf(drawerPreImg.preImg) != -1
                  "
                  class="info-in"
                >{{ tag.name }}</span>
                <span v-else class="info-to">{{ tag.name }}</span>
              </div>
              <!-- <button class="btn" @click="closePreview()">确定</button> -->
            </div>
          </el-drawer>
        </div>

        <!-- 图片预览 -->
        <el-drawer
          title="图片预览"
          :with-header="false"
          :append-to-body="true"
          :show-close="true"
          :transfer="false"
          :visible.sync="drawerPreImgs.visible"
          direction="rtl"
          :before-close="closePreviews"
          size="100%"
          custom-class="preview"
        >
          <div class="app-img-top">
            <div class="app-img-title">图片预览</div>
            <div class="close" @click="closePreviews()">
              <i class="el-icon-close" />
            </div>
          </div>
          <el-image class="preview-img" :src="drawerPreImg.preImg" fit="contain" />
        </el-drawer>

        <div class="station">
          <div
            v-for="(tag, index) in drawer.delvTagList"
            :key="index"
            class="piece"
            @click="drawerTag.visible = true"
          >
            <span>{{ tag.name }}</span>
            <span v-if="tag.val && tag.urlList">{{
              tag.val+tag.urlList.length
            }}</span>
            <span v-else-if="tag.urlList && tag.urlList.length > 0">{{
              tag.urlList.length
            }}</span>
            <span v-else-if="tag.val && tag.val > 0">{{
              tag.val
            }}</span>
            <span v-else>-</span>
          </div>
        </div>

        <!-- 订单流程信息 -->
        <div v-if="drawer.order.delvStatus > 1" class="card">
          <div v-if="drawer.order.delvStatus > 1">
            <div class="state">已接单</div>
            <div class="list-s">接单人：<span>{{ drawer.order.waiter }}</span></div>
            <div class="list-s">联系电话：<span>{{ drawer.order.waiterPhone }}</span></div>
            <div class="time">{{ drawer.order.takeTime }}</div>
          </div>
          <div v-if="drawer.order.delvStatus > 2">
            <hr style="border: 0.5px dashed #eeeeee">
            <div class="state">已取件</div>
            <div class="amount">
              <span v-for="(delv,index) in drawer.delvList" :key="index">{{ delv.productName }}  {{ delv.productNum }}</span>
            </div>
            <div class="info">{{ drawer.order.pickRmk }}</div>
            <div class="time">{{ drawer.order.pickTime }}</div>
          </div>
          <div v-if="drawer.order.delvStatus > 3">
            <hr style="border: 0.5px dashed #eeeeee">
            <div class="state">已送达</div>
            <div class="info">{{ drawer.order.arriveRmk }}</div>
            <div class="imgs">
              <div
                v-for="(img, index) in drawer.order.arrivePhotoList"
                :key="index"
                class="v-img"
                @click="previewImages(img)"
              >
                <el-image :src="img" fit="contain" />
              </div>
            </div>
            <div class="time">{{ drawer.order.arriveTime }}</div>
          </div>
        </div>
        <button
          v-if="
            drawer.order.delvStatus && drawer.order.delvStatus == 1
          "
          class="Submit"
          @click="takeClick"
        >
          接单
        </button>
        <button
          v-else-if="
            drawer.order.delvStatus && drawer.order.delvStatus == 2
          "
          class="Submit"
          @click="drawerPick.visible = true"
        >
          取件确认
        </button>
        <button
          v-else-if="
            drawer.order.delvStatus && drawer.order.delvStatus == 3
          "
          class="Submit"
          @click="drawerArrive.visible=true"
        >
          送达确认
        </button>
        <!-- 驿站标记弹窗 -->
        <el-drawer
          title="快递归类"
          :append-to-body="true"
          :show-close="true"
          :transfer="false"
          :visible.sync="drawerTag.visible"
          direction="btt"
          size="50%"
          custom-class="preview-bot"
        >
          <div class="prv">
            <div class="station">
              <div
                v-for="(tag, index) in drawer.delvTagList"
                :key="index"
                class="piece-a"
              >
                <span>{{ tag.name }}</span>
                <el-input-number
                  v-if="tag.urlList"
                  v-model="tag.val"
                  :min="0"
                  focus
                  size="mini"
                  @change="(currVal, oldVal) => numInput(tag, currVal)"
                />
              </div>
            </div>
            <button class="prv-bt" @click="saveTag">保存</button>
          </div>
        </el-drawer>

        <!-- 取件确认弹窗 -->
        <el-drawer
          title="取件确认"
          :append-to-body="true"
          :show-close="true"
          :transfer="false"
          :visible.sync="drawerPick.visible"
          direction="btt"
          size="50%"
          :before-close="closeTake"
          custom-class="preview-bot"
        >
          <div class="prv">
            <span class="sm">以下信息为计费依据，请认真填写</span>
            <div class="prv-cont">
              <div v-for="(delv,index) in drawer.delvList" :key="index" class="prv-num">
                <span class="prv-name">{{ delv.productName }}</span>
                <span class="prv-sm">{{ delv.remark }}</span>
                <el-input-number v-model="delv.productNum" :min="0" size="mini" placeholder="0" />
              </div>
            </div>
            <div>
              <span>备注（用户可查看）</span>
              <el-input
                v-model="drawer.order.pickAttach"
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
              />
            </div>
            <button class="prv-bt" @click="pickClick">提交</button>
          </div>
        </el-drawer>
        <!-- 送达确认弹窗 -->
        <el-drawer
          title="送达确认"
          :append-to-body="true"
          :show-close="true"
          :transfer="false"
          :visible.sync="drawerArrive.visible"
          direction="btt"
          size="50%"
          :before-close="closeReach"
          custom-class="preview-bot"
        >
          <div class="prv">
            <span class="sm">添加送达照片（用户可见）</span>

            <el-upload
              accept="image/*"
              :action="upload.url"
              :headers="upload.headers"
              :on-success="uploadSuccess"
              :on-remove="uploadRemove"
              :before-upload="beforeUpload"
              list-type="picture-card"
            >
              <i class="el-icon-plus" />
            </el-upload>
            <span>备注（用户可见）</span>
            <el-input
              v-model="drawer.order.arriveRmk"
              type="textarea"
              :rows="2"
              placeholder="输入内容..."
            />
            <button class="prv-bt" @click="arriveClick">提交</button>
          </div>
        </el-drawer>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  listOrder,
  detailOrder,
  takeOrder,
  pickUp,
  arrive,
  sumData
} from '@/api/taskhub/order'
// 驿站标签列表查询，批量更新接口
import { listDelvTag, updateDelvTagBatch } from '@/api/taskhub/delvTag'
// 配送大中小件列表查询，批量更新接口
import { listOrderDelv } from '@/api/taskhub/orderDelv'
import { getToken } from '@/utils/auth'

export default {
  name: 'Order',
  dicts: ['app_order_status', 'app_order_delv_status', 'app_order_delv_mode', 'app_order_tag'],
  components: {
    // VuePullToRefresh
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 订单表格数据
      orderList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      input: '', // 取件小、中、大数量
      textarea: '', // 取件备注

      queryParams: {
        payMethod: null,
        tradeNo: null,
        accountUserId: null,
        addrId: null,
        status: null,
        tag: null,
        totalAmount: null,
        realPayAmount: null,
        aptTime: null,
        attachFiles: null,
        attachText: null,
        appUserId: null,
        isDeleted: null,
        payTime: null,
        deliverTime: null,
        successTime: null,
        closeTime: null
      },

      // 表单参数
      form: {},
      // 表单校验
      rules: {
        tradeNo: [
          { required: true, message: '订单号不能为空', trigger: 'blur' }
        ],
        accountUserId: [
          { required: true, message: '全平台用户id不能为空', trigger: 'blur' }
        ],
        addrId: [
          { required: true, message: '收件地址不能为空', trigger: 'blur' }
        ],
        status: [
          {
            required: true,
            message:
              '订单状态,1:订单创建成功、2：支付成功、3：交易完结不能为空',
            trigger: 'change'
          }
        ],
        tag: [
          {
            required: true,
            message: '订单标识，0：普通订单、1：加急订单不能为空',
            trigger: 'blur'
          }
        ],
        totalAmount: [
          { required: true, message: '订单总金额不能为空', trigger: 'blur' }
        ],
        createTime: [
          { required: true, message: '订单创建时间不能为空', trigger: 'blur' }
        ]
      },
      // 订单各状态数量
      statsData: {},
      // 文件上传
      upload: {
        url: process.env.VUE_APP_BASE_API + '/file/upload', // 上传文件服务器地址
        headers: {
          Authorization: 'Bearer ' + getToken()
        },
        fileList: []
      },

      // 抽屉订单详情数据
      drawer: {
        visible: false,
        pickImgs: [{}],
        orderId: null,
        order: {
          attachFileList: []
        }, // 订单详情
        delvList: [], // 配送大中小列表
        delvTagList: [{}] // 驿站标签列表
      },
      // 图片预览抽屉
      drawerPreImg: {
        visible: false,
        preImg: ''
      },
      drawerPreImgs: {
        visible: false,
        preImgs: ''
      },
      // 驿站标记窗口
      drawerTag: {
        visible: false
      },
      // 取件窗口
      drawerPick: {
        visible: false
      },
      // 送达窗口
      drawerArrive: {
        visible: false
      },

      // 列表请求参数，状态，status，3：支付成功待接单
      req: {
        delvStatus: null,
        payStatus: null,
        pageNum: 1,
        pageSize: 30
      },
      intervalId: null
    }
  },
  // 隐藏系统导航框架
  mounted() {
    // this.$store.dispatch('app/toggleSideBarHide', true)
    // document.querySelector('.navbar').style.display = 'none'
    // document.querySelector('.tags-view-container').style.display = 'none'
    this.intervalId = setInterval(this.refreshList, 80000)
  },
  created() {
    this.refreshList()
  },
  beforeDestroy() {
    clearInterval(this.intervalId)
  },
  methods: {
    // 计算属性，用于格式化电话号码，仅显示后四位
    formattedPhoneNumber(phone) {
      if (phone && phone.length >= 4) {
        return '****' + phone.slice(-4)
      } else {
        return phone
      }
    },
    // 刷新列表
    refreshList() {
      this.getList()
      this.loadSumData()
    },
    // 刷新详情
    refreshDetail() {
      const params = {
        id: this.drawer.orderId
      }
      detailOrder(params).then(res => {
        if (res.code === 200) {
          this.drawer.order = res.data
          this.drawer.delvTagList = res.data.tagList
          this.drawer.delvList = res.data.delvList
        }
      })
    },
    loadSumData() {
      sumData().then(res => {
        if (res.code === 200) {
          this.statsData = res.data
        } else {
          this.$msgError(res.msg)
        }
      })
    },
    /** 查询订单列表 */
    getList(param) {
      this.loading = true
      const req = this.req
      listOrder(req).then((response) => {
        this.orderList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.req.pageSize = val
      this.getList()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.req.pageNum = val
      this.getList()
      console.log(`当前页: ${val}`)
    },
    // 当前预览图片打标签
    previewImage(imgUrl) {
      this.drawerPreImg.preImg = imgUrl
      this.drawerPreImg.visible = true
    },
    // 当前预览图片
    previewImages(imgUrl) {
      this.drawerPreImg.preImg = imgUrl
      this.drawerPreImgs.visible = true
    },

    // 关闭取快递确认弹窗
    closeTake(item) {
      this.drawerPick.visible = false
    },
    // 关闭送达弹窗
    closeReach(item) {
      this.drawerArrive.visible = false
    },
    // 关闭预览
    closePreview() {
      this.drawerPreImg.visible = false
      this.drawerPreImg.preImg = null
    },
    closePreviews() {
      this.drawerPreImgs.visible = false
      this.drawerPreImg.preImg = null
    },
    // 上传图片成功
    uploadSuccess(res, file, fileList) {
      const files = []
      if (res.code !== 200) {
        for (let i = 0; i < fileList.length; i++) {
          if (fileList[i].uid === file.uid) {
            fileList.splice(i, 1)
          }
        }
        return
      } else {
        fileList.forEach(item => {
          files.push(item.response.data.url)
        })
      }
      this.upload.fileList = files
    },
    // 上传前对图片进行压缩
    async beforeUpload(file) {
      return new Promise((resolve, reject) => {
        const maxSize = 1024 * 1024 // 目标文件大小 1MB
        const reader = new FileReader()

        reader.readAsDataURL(file)

        reader.onload = async() => {
          const img = new Image()
          img.src = reader.result

          img.onload = () => {
            const scale = Math.sqrt(maxSize / parseInt(reader.result.length) * 1.0)

            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')

            const width = img.width * scale
            const height = img.height * scale
            canvas.width = width
            canvas.height = height

            ctx.drawImage(img, 0, 0, width, height)
            canvas.toBlob((blob) => {
              const compressedFile = new File([blob], file.name, { type: 'image/jpeg' })
              resolve(compressedFile)
            }, 'image/jpeg', 0.9)
          }
        }
      })
    },
    // 删除图片
    uploadRemove(file, fileList) {
      const files = []
      fileList.forEach(file => {
        files.push(file.response.data.url)
      })
      this.upload.fileList = files
    },
    // 数字输入框值改变
    numInput(tag, currVal) {
      if (tag.urlList) {
        tag.total = tag.urlList.length + currVal
        return
      }
      tag.total = currVal
    },
    // 接单
    takeClick() {
      takeOrder({ id: this.drawer.order.id }).then((res) => {
        if (res.code === 200) {
          this.$modal.msgSuccess('接单成功')
          this.drawer.order.delvStatus = 2
          this.refreshDetail()
        } else {
          this.$modal.msgError('网络异常')
        }
      })
    },

    // 取件
    pickClick() {
      const req = {
        orderId: this.drawer.order.id,
        pickAttach: this.drawer.order.pickAttach,
        delvList: this.drawer.delvList
      }
      pickUp(req).then(res => {
        if (res.code === 200) {
          this.drawer.order.delvStatus = 3
          this.drawerPick.visible = false
          this.$modal.msgSuccess('提交成功')
          this.refreshDetail()
        } else {
          this.$modal.msgError('提交失败')
        }
      })
    },

    // 送达
    arriveClick() {
      const req = {
        orderId: this.drawer.order.id,
        arriveRmk: this.drawer.order.arriveRmk,
        arrivePhotoList: this.upload.fileList
      }
      arrive(req).then(res => {
        if (res.code === 200) {
          this.drawer.order.delvStatus = 4
          this.drawerArrive.visible = false
          this.$modal.msgSuccess('提交成功')
          this.refreshDetail()
        } else {
          this.$modal.msgError('提交失败')
        }
      })
    },
    // 图片是否已经打过标签
    tagName(imgUrl) {
      // imgUrl = imgUrl.substring(imgUrl.length - 12)
      for (const tag of this.drawer.delvTagList) {
        if (tag.urlList) {
          for (const url of tag.urlList) {
            // url = url.substring(url.length - 12)
            if (url === imgUrl) {
              return tag.name
            }
          }
        }
      }
      return ''
    },
    // 点击标签统计驿站快递数量
    tagClicked(tag) {
      // Handle tag click event
      const preImg = this.drawerPreImg.preImg
      this.drawer.delvTagList.forEach((item) => {
        // 初始化
        if (!item.urlList) {
          item.urlList = []
        }
        // 不是当前点击标签，清空
        if (item.id !== tag.id) {
          const index = item.urlList.indexOf(preImg)
          if (index !== -1) {
            // 如果找到了与 preImg 匹配的 url
            // 使用 splice 方法从 urlList 中移除该元素
            item.urlList.splice(index, 1)
          }
        } else {
        // 否则设置url

          const index = item.urlList.indexOf(preImg)
          if (index !== -1) {
            // 如果找到了与 preImg 匹配的 url
            // 使用 splice 方法从 urlList 中移除该元素
            item.urlList.splice(index, 1)
          } else {
            // 如果未找到与 preImg 匹配的 url，则将其添加到 urlList 中
            item.urlList.push(preImg)
          }
        }
      })
    },
    // 保存标签
    saveTag() {
      const req = []
      for (const tag of this.drawer.delvTagList) {
        req.push(tag)
      }
      updateDelvTagBatch(req).then((res) => {
        if (res.code === 200) {
          this.$modal.msgSuccess('保存成功')
          this.drawerTag.visible = false
        }
      })
    },
    /** 根据订单ID查询大中小件列表 */
    getDelvList(orderId) {
      const param = {
        orderId: orderId
      }
      listOrderDelv(param).then((res) => {
        if (res.code === 200) {
          this.drawer.delvList = res.data
        }
      })
    },
    /** 查询驿站标签列表 */
    getDelvTagList(orderId) {
      const param = {
        orderId: orderId
      }
      listDelvTag(param).then((res) => {
        if (res.code === 200) {
          this.drawer.delvTagList = res.data
        }
      })
    },

    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 抽屉打开
    drawerOpen(item) {
      this.drawer.visible = true
      this.drawer.orderId = item.id
      this.refreshDetail()
    },
    // 抽屉关闭
    drawerClose() {
      this.refreshList()
      this.drawer = {
        visible: false,
        order: {
          attachFileList: []
        }, // 订单详情
        delvList: [], // 配送大中小列表
        delvTagList: [] // 驿站标签列表
      }
    },
    // 字典转换
    dictFormat(typeName, value) {
      const label = this.selectDictLabel(this.dict.type[typeName], value)
      return label
    }

  }
}
</script>

<style>
html {
  background-color: #ecedf1;
  height: 100%;
}
*::-webkit-scrollbar {
  display: none;
}
* {
  scrollbar-width: none;
}
* {
  -ms-overflow-style: none;
}

.container {
  padding: 0px 10px 10px 10px;
}
.nav {
  width: 100%;
  height: 50px;
  z-index: 999;
  background-color: #ffffff;
  top: 0;
  left: 0;
  text-align: center;
  padding: 15px;
  box-shadow: 0 0.3rem 1rem 0 rgba(168, 168, 168, 0.2);
}

.tab {
  margin-left: 20px;
  border-radius: 5px !important;
  border: none;
}
.list {
  width: 100%;
  border-radius: 10px;
  background-color: #ffffff;
  margin: 10px auto;
  padding: 10px 10px 10px 10px;
  box-shadow: 0 0.3rem 1rem 0 rgba(222, 199, 246, 0.2);
}
.title {
  width: 100%;
  display: flex;
  font-size: 0.9rem;
  margin: 0;
  color: #353535;
}
.left {
  flex: 15;
  line-height: 20px;
  font-weight: bold;
  text-align: left;
}
.left2 {
  flex: 15;
  line-height: 20px;
  font-weight: bold;
  text-align: left;
  color: #ff0000;
}
.right {
  flex: 10;
  text-align: right;
  line-height: 20px;
  font-weight: bold;
}
.title .center {
  flex: 8;
  height: 90px;
  line-height: 90px;
  color: #7c7c7c;
  text-align: left;
}
.t1 {
  color: #ff3456;
}
.t2 {
  color: #ffa600;
}
.t3 {
  color: #ffa600;
}
.t4 {
  color: #009468;
}
.station {
  width: 100%;
  flex-direction: row;
  display: flex;
  border-top: 1px #f0f0f0 solid;
  border-bottom: 1px #f0f0f0 solid;
  flex-wrap: wrap;
  color: #9b9b9b;
}

.piece {
  display: flex;
  font-size: 0.8rem;
  margin: 3px auto;
  flex-direction: column;
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
}
.piece-a {
  display: flex;
  font-size: 0.8rem;
  width: 105px;
  margin: 0 5px;
  flex-direction: column;
  text-align: center;
  align-items: center;
}
.piece > span {
  line-height: 20px;
}
.el-input-number--mini{
  width: 80px;
}
.el-input--mini .el-input__inner{
  height: 30px;
  line-height: 30px;
}
.el-input-number--mini .el-input__inner{
  padding: 0 20px;
}
.el-input-number--mini .el-input-number__increase, .el-input-number--mini .el-input-number__decrease{
  width: 20px;
}
.add {
  width: 100%;
  flex-direction: row;
  display: flex;
  font-size: 0.9rem;
  margin: 5px 0;
  line-height: 1rem;
}
.play {
  width: 100%;
  flex-direction: row;
  display: flex;
  font-size: 0.8rem;
  margin: 5px 0;
  color: #333333;
}
.play-num{
  flex: 1;
}
.play-num span{
  margin-right: 10px;
}
.play-cla{
  flex: 1;
  overflow: hidden;
}
.footer {
  width: 100%;
  flex-direction: row;
  display: flex;
  color: #a8a8a8;
  font-size: 0.8rem;
}
.footer .time {
  padding-right: 30px;
}
.content {
  padding: 60px 15px 40px 15px;
  background-color: #e9e9e9;
  height: 100%;
}

.title-s {
  width: 100%;
  font-size: 0.9rem;
  font-weight: bold;
  line-height: 1rem;
  text-align: left;
  color: #858585;
  padding-left: 10px;
}
.list-s {
  width: 100%;
  font-size: 0.85rem;
  text-align: left;
  color: #8f8f8f;
  line-height: 1.6rem;
}
.list-s span {
  color: #161616;
}
a{
  color: #a7a7a7;
}
.app-top {
  position: fixed;
  width: 100%;
  height: 50px;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: #ffffff;
  box-shadow: 0 0.3rem 1rem 0 rgba(168, 168, 168, 0.2);
}
.app-title {
  padding-left: 20px;
  line-height: 50px;
  font-size: 1rem;
  font-weight: bold;
}
.close {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 1.4rem;
}
.card {
  width: 100%;
  margin: 0px auto;
  background-color: #ffffff;
  border-radius: 5px;
  padding: 15px;
}
.info {
  font-size: 0.8rem;
  margin: 5px 0;
}
.state {
  font-size: 0.9rem;
  font-weight: bold;
  margin: 5px 0;
  color: #c0c0c0;
}
.amount {
  font-size: 0.8rem;
  width: 100%;
  margin: 5px 0;
}
.amount span {
  color: #ff5100;
  font-weight: bold;
  margin-right: 30px;
}
.time {
  font-size: 0.8rem;
  color: #8f8f8f;
  line-height: 1rem;
  flex: 1;
}
.Submit {
  width: 90%;
  margin: auto;
  background-color: #ff6600;
  color: #ffffff;
  position: fixed;
  bottom: 10px;
  height: 40px;
  font-size: 1rem;
  border-radius: 90px;
  border: none;
  left: 0;
  right: 0;
  display: 0;
}
.v-img {
  width: 4rem;
  height: 4rem;
  overflow: hidden;
  margin: 5px 3px 0 0;
  border: 1px #c9c9c9 solid;
  position: relative;
}
.imgs {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
}
.img-info {
  position: absolute;
  z-index: 9999;
  left: 0;
  right: 0;
  top: 24px;
  font-size: 0.8rem;
  line-height: 1.2rem;
  margin: auto;
  background-color: #ff4800c5;
  color: #ffffff;
  border-radius: 50px;
  max-width: 3rem;
  text-align: center;
}
.v-img image {
  width: 100%;
}
.preview {
  background-color: #000000bb;
  width: 100%;
}

.preview-img {
  width: 100%;
}
.preview-img image {
  width: 100%;
  position: relative;

  bottom: 0;
}
.preview-info {
  position: absolute;
  z-index: 99999;
  display: flex;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 0.8rem;
  line-height: 2.4rem;
  background-color: #000000ad;
  color: #ffffff;
  padding-top: 10px;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}
.info-in {
  background-color: #ff5420;
  color: ffffff;
  margin: 10px 5px;
  font-size: 0.9rem;
  height: 2.2rem;
  padding: 8px 12px;
  border-radius: 0.3rem;
  border: 1px #ff5420 solid;
}
.info-to {
  color: ffffff;
  margin: 10px 5px;
  font-size: 0.9rem;
  height: 2.2rem;
  padding: 8px 12px;
  border-radius: 0.3rem;
  border: 1px #ff5420 solid;
}
.btt {
  width: 90%;
  margin: 20px auto;
  left: 0;
  right: 0;
  line-height: 2.4rem;
  font-size: 1rem;
  border-radius: 2rem;
  background-color: #ffffff;
  color: #000000;
  border: none;
}
.btn {
  width: 90%;
  margin: 20px auto;
  left: 0;
  right: 0;
  line-height: 2.4rem;
  font-size: 1rem;
  border-radius: 2rem;
  background-color: #ff5420;
  color: #ffffff;
  border: none;
}
.app-img-top {
  position: fixed;
  width: 100%;
  height: 50px;
  top: 0;
  left: 0;
  color: #ffffff;
  z-index: 9999;
  background-color: #000000c2;
  box-shadow: 0 0.3rem 1rem 0 rgba(168, 168, 168, 0.2);
}
.app-img-title {
  padding-left: 20px;
  line-height: 50px;
  font-size: 1rem;
  font-weight: bold;
}
.preview-bot {
  border-radius: 15px 15px 0 0;
  margin-bottom: 0;
}
.preview-bot header {
  padding: 10px;
  margin-bottom: 0;
  border-bottom: 1px #eeeeee solid;
}

.prv {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 10px 10px 10px;
  font-size: 0.8rem;
}
.prv-cont {
  display: flex;
  flex-direction: row;
  justify-content:space-around ;
}
.prv-num {
  margin: 5px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.sm {
  color: #727272;
}
.prv-name {
  color: #ff7300;
  font-weight: bold;
  line-height: 1.2rem;
}
.prv-sm {
  color: #202020;
  line-height: 1.2rem;
}
.prv-bt {
  width: 100%;
  margin: 10px auto;
  background-color: #ff6600;
  color: #ffffff;
  height: 40px;
  font-size: 1.2rem;
  border-radius: 90px;
  border: none;
}
.el-upload--picture-card {
  width: 70px;
  height: 70px;
  border-radius: 3px;
  line-height: 80px;
}
.el-upload-list--picture-card .el-upload-list__item{
  width: 70px;
  height: 70px;
  border-radius: 3px;
  line-height: 80px;
}
.el-upload-list--picture-card .el-upload-list__item-status-label{
  width: 8px;
  height: 8px;
  position: absolute;
  border-radius: 8px;
  top:0;
  right: 0;
  background-color: #13ce66;
}
.el-radio-button:first-child .el-radio-button__inner{
  border:1px #DCDFE6 solid;
  border-radius: 4px;
  margin-left: 20px;
}
</style>
